<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <style type="text/css">
        .product-add-action ul li a {
            width: 35px;
            height: 35px;
            line-height: 39px;
            background-color: white;
        }
        .product-add-action ul li:hover a {
            color: white;
            background-color: #006fb7;
            line-height: 39px;
        }
        .product-add-action ul li:not(:last-child) {
            margin-right: 0px;
        }
        .section-space-y-axis-100 {
            padding-top: 30px;
            padding-bottom: 100px;
        }
        .nav-item {
            margin-bottom: 5px;
            width: 350px;
        }
        .myaccount-tab-trigger{
            width: 350px;
        }
        .col-lg-9 {
            -ms-flex: 0 0 auto;
            width: 65%;
            margin-left: 80px;
        }
        .myaccount-tab-trigger li a{
            background: #1EB9EE;
            border-color: #1EB9EE;
            color: #fff;
        }
        .myaccount-tab-trigger li a.active {
            background: #006fb7;
            border-color: #006fb7;
            color: #fff;
        }
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
    </style>
</head>

<body>
<div class="main-wrapper">
    <div class="account-page-area section-space-y-axis-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <ul class="nav myaccount-tab-trigger" id="account-page-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="account-dashboard-tab" data-bs-toggle="tab" href="#account-dashboard" role="tab" aria-controls="account-dashboard" aria-selected="true">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="account-orders-tab" data-bs-toggle="tab" href="#account-orders" role="tab" aria-controls="account-orders" aria-selected="false">Orders</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="account-downloads-tab" data-bs-toggle="tab" href="#account-download" role="tab" aria-controls="account-download" aria-selected="false">Downloads</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="account-address-tab" data-bs-toggle="tab" href="#account-address" role="tab" aria-controls="account-address" aria-selected="false">Addresses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="account-details-tab" data-bs-toggle="tab" href="#account-details" role="tab" aria-controls="account-details" aria-selected="false">Account Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="account-logout-tab" href="javascript:void(0)" role="tab" aria-selected="false">Logout</a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-9">
                    <div class="tab-content myaccount-tab-content" id="account-page-tab-content">
                        <div class="tab-pane fade show active" id="account-dashboard" role="tabpanel" aria-labelledby="account-dashboard-tab">
                            <div class="myaccount-dashboard">
                                <p>Hello <b>Harmic</b> (not Harmic? <a href="login-register.html">Sign
                                    out</a>)</p>
                                <p>From your account dashboard you can view your recent orders, manage your shipping and
                                    billing addresses and <a href="javascript:void(0)">edit your password and account details</a>.</p>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="account-orders" role="tabpanel" aria-labelledby="account-orders-tab">
                            <div class="myaccount-orders">
                                <h4 class="small-title">MY ORDERS</h4>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <tbody>
                                        <tr>
                                            <th>ORDER</th>
                                            <th>DATE</th>
                                            <th>STATUS</th>
                                            <th>TOTAL</th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <td><a class="account-order-id" href="javascript:void(0)">#5364</a></td>
                                            <td>Mar 27, 2019</td>
                                            <td>On Hold</td>
                                            <td>$162.00 for 2 items</td>
                                            <td><a href="javascript:void(0)" class="btn btn-secondary btn-primary-hover"><span>View</span></a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="account-download" role="tabpanel" aria-labelledby="account-downloads-tab">
                            <div class="myaccount-address">
                                <p>Download apk from links.</p>
                                <a>Android Version</a>
                                <a>IOS Version</a>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="account-address" role="tabpanel" aria-labelledby="account-address-tab">
                            <div class="myaccount-address">
                                <p>The following addresses will be used on the checkout page by default.</p>
                                <div class="row">
                                    <div class="col">
                                        <h4 class="small-title">BILLING ADDRESS</h4>
                                        <address id="billingAddress">
                                            1234 Heaven Stress, Beverly Hill OldYork UnitedState of Lorem
                                        </address>
                                    </div>
                                    <div class="col">
                                        <h4 class="small-title">SHIPPING ADDRESS</h4>
                                        <address id="shippingAddress">
                                            1234 Heaven Stress, Beverly Hill OldYork UnitedState of Lorem
                                        </address>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="account-details" role="tabpanel" aria-labelledby="account-details-tab">
                            <div class="myaccount-details">
                                <form action="#" class="myaccount-form">
                                    <div class="myaccount-form-inner">
                                        <div class="single-input single-input-half">
                                            <label>First Name</label>
                                            <input type="text" id="firstName" disabled>
                                        </div>
                                        <div class="single-input single-input-half">
                                            <label>Last Name</label>
                                            <input type="text" id="lastName" disabled>
                                        </div>
                                        <div class="single-input">
                                            <label>Email*</label>
                                            <input type="email" id="email" disabled >
                                        </div>
                                        <div class="single-input">
                                            <label>Current Password(leave blank to leave
                                                unchanged)</label>
                                            <input type="password" id="psw">
                                        </div>
                                        <div class="single-input">
                                            <label>New Password (leave blank to leave
                                                unchanged)</label>
                                            <input type="password" id="psw1">
                                        </div>
                                        <div class="single-input">
                                            <label>Confirm New Password</label>
                                            <input type="password" id="psw2">
                                        </div>
                                        <div class="single-input">
                                            <button class="btn btn-custom-size lg-size btn-secondary btn-primary-hover rounded-0" type="submit">
                                                <span>SAVE CHANGES</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-area">
        <div class="footer-bottom py-3" data-bg-color="#1EB9EE">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright">
                            <span class="copyright-text text-white">Copyright &copy; 2023.LAO Asia Unicom All rights reserved.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="scroll-to-top" href="">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>

<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/getcart.js"></script>
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
</body>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    // 查询用户信息
    $.ajax({
        url:HOST+"webapi/userInfo/getInfo",
        headers:{"token":localStorage.getItem("token")},
        success:function (res) {
            if(res.code==200){
                $("#email").val(res.data.email);
            }else{
                $("#email").val('');
            }
        }
    })
    // 查询账单地址
    $.ajax({
        url:HOST+"webapi/address/getAddress",
        data:{type:2},
        headers:{"token":localStorage.getItem("token")},
        success:function (res) {
            if (res.code == 200){
                if(res.data.length==0){
                    $("#billingAddress").html('none')
                }else{
                    let s = `${res.data[0].firstName} ${res.data[0].lastName} ${res.data[0].streetAddress}, ${res.data[0].townOrCity} ${res.data[0].stateOrCounty}`;
                    $("#billingAddress").html(s)
                }
            }
        }
    })
    // 查询收货地址
    $.ajax({
        url:HOST+"webapi/address/getAddress",
        headers:{"token":localStorage.getItem("token")},
        success:function (res) {
            if(res.code==200){
                if(res.data.length==0){
                    $("#shippingAddress").html('')
                }else{
                    let s = `${res.data[0].firstName} ${res.data[0].lastName} ${res.data[0].streetAddress}, ${res.data[0].townOrCity} ${res.data[0].stateOrCounty}`;
                    $("#shippingAddress").html(s)
                    $("#firstName").val(res.data[0].firstName);
                    $("#lastName").val(res.data[0].lastName);
                }
            }else{
                $("#shippingAddress").html('')
                $("#shippingAddress").html('')
                $("#firstName").val('');
                $("#lastName").val('');
            }

        }
    })
    // 点击退出
    $("#account-logout-tab").click(function () {
        localStorage.removeItem("token");
        location.replace("login-register2.html")
    });
    // 查询订单
    $.ajax({
        url:HOST+"webapi/order/getorder",
        headers:{"token":localStorage.getItem("token")},
        type:"get",
        success:function (res) {
            if(res.code==200 && res.data.length>0){
                let s = ` <tbody>
                                <tr>
                                    <th>ORDER</th>
                                    <th>DATE</th>
                                    <th>STATUS</th>
                                    <th>TOTAL</th>
                                    <th></th>
                                </tr>`;
                for (let i = 0; i < res.data.length; i++) {
                    s+=`<tr>
                            <td><a class="account-order-id" href="javascript:void(0)">#5364</a></td>
                            <td>Mar 27, 2019</td>
                            <td>On Hold</td>
                            <td>$162.00 for 2 items</td>
                            <td><a href="javascript:void(0)" class="btn btn-secondary btn-primary-hover"><span>View</span></a>
                            </td>
                        </tr>`;
                }
                s+='</tbody>';
                $(".table").html(s);
            }else{
                let s ='<td colspan="4">nothing find in your order</td>';
                $(".table tbody tr:eq(1)").html(s);
            }
        }
    })
</script>
</html>